<script lang="ts" setup>
  import { ISearchData } from '@/types/data';
  import { useBScroll } from '@/hooks';

  import HomeTitle from './Sub/HomeTitle.vue';
  import FoodList from './FoodList/index.vue';
  import ViewList from './ViewList/index.vue';
  import HotelList from './HotelList/index.vue';
  import KtvList from './KtvList/index.vue';
  import MassageList from './MassageList/index.vue';

  interface IProps {
    errorShow: boolean;
    loadingShow: boolean;
    data: Partial<ISearchData>;
  }

  defineOptions({
    name: 'SearchScrollWrapper'
  });

  const { wrapperRef } = useBScroll();

  const props = defineProps<IProps>();
</script>

<template>
  <div class="scroll-wrapper" ref="wrapperRef">
    <div class="scroll-content">
      <no-data-tip
        v-show="
          (!props.data.viewDatas || props.data.viewDatas.length <= 0) &&
          (!props.data.foodDatas || props.data.foodDatas.length <= 0) &&
          (!props.data.hotelDatas || props.data.hotelDatas.length <= 0) &&
          (!props.data.massageDatas || props.data.massageDatas.length <= 0) &&
          (!props.data.ktvDatas || props.data.ktvDatas.length <= 0)
        "
      />

      <div v-if="props.data.viewDatas && props.data.viewDatas.length > 0">
        <home-title title="景点结果："></home-title>
        <view-list :viewDatas="props.data.viewDatas"></view-list>
      </div>

      <div v-if="props.data.foodDatas && props.data.foodDatas.length > 0">
        <home-title title="美食结果："></home-title>
        <food-list :foodDatas="props.data.foodDatas"></food-list>
      </div>

      <div v-if="props.data.hotelDatas && props.data.hotelDatas.length > 0">
        <home-title title="酒店结果："></home-title>
        <hotel-list :hotelDatas="props.data.hotelDatas"></hotel-list>
      </div>

      <div v-if="props.data.massageDatas && props.data.massageDatas.length > 0">
        <home-title title="按摩结果："></home-title>
        <massage-list :massageDatas="props.data.massageDatas"></massage-list>
      </div>

      <div v-if="props.data.ktvDatas && props.data.ktvDatas.length > 0">
        <home-title title="KTV结果："></home-title>
        <ktv-list :ktvDatas="props.data.ktvDatas"></ktv-list>
      </div>

      <bad-network v-if="props.errorShow" />
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
